<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

  <title>Boost_搜索引擎</title>
  <style>
    html,
    body,
    a,
    div,
    span,
    table,
    tr,
    td,
    strong,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    p,
    input {
      font-weight: inherit;
      font-size: inherit;
      list-style: none;
      border-spacing: 0;
      border: 0;
      border-collapse: collapse;
      text-decoration: none;
      padding: 0;
      margin: 0;
    }

    html,
    body {
      font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
      background-color: #3D69A4;
      overflow: hidden;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    .snow .snow_slice {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 600px;
      pointer-events: none;
      transform-origin: 0% 0%;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      overflow: hidden;
      z-index: 2;
    }

    .snow .snow_1 {
      animation-name: snow_falling_fore;
      animation-delay: 0s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }

    .snow .snow_2 {
      animation-name: snow_falling_fore;
      animation-delay: 25s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }

    .snow .snow_3 {
      animation-name: snow_falling_mid;
      animation-delay: 0s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }

    .snow .snow_4 {
      animation-name: snow_falling_mid;
      animation-delay: 35s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }

    .snow .snow_drifter {
      width: 100%;
      height: 100%;
      background-repeat: repeat;
      background-image: url(./image/snow-static.png);
      pointer-events: none;
    }

    @keyframes snow_falling_fore {
      0% {
        top: -100%;
        opacity: 0
      }

      1% {
        top: -100%;
        opacity: 1
      }

      99.8% {
        top: 100%;
        opacity: 1
      }

      99.9% {
        opacity: 0
      }

      100% {
        top: -100%;
        opacity: 0
      }
    }

    @keyframes snow_falling_mid {
      0% {
        top: -100%;
        opacity: 0
      }

      1% {
        top: -100%;
        opacity: 1
      }

      99.8% {
        top: 100%;
        opacity: 1
      }

      99.9% {
        opacity: 0
      }

      100% {
        top: -100%;
        opacity: 0
      }
    }

    /* 四边 */
    .frost {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }

    .frost .frame_sprite {
      position: absolute;
      height: 100px;
      background-repeat: repeat-x;
      background-size: contain;
      background-position: center bottom;
      background-image: url(./image/border-ice.png);
    }

    .frost .frame_left {
      top: -133px;
      left: 0;
      transform: rotate(90deg);
      transform-origin: 0 100px;
      pointer-events: none;
      width: 500%;
    }

    .frost .frame_right {
      top: 100%;
      left: calc(100% - 100px);
      transform: rotate(-90deg);
      transform-origin: 0 0;
      width: 500%;
      pointer-events: none;
    }

    .frost .frame_top {
      top: 0;
      width: 500%;
      transform: rotate(180deg);
      pointer-events: none;
    }

    .frost .frame_bottom {
      bottom: 0;
      left: 0;
      width: 500%;
      pointer-events: none;
    }
  </style>
 <style>
  html, body, a, div, span, table, tr, td, strong, ul, ol, li, h1, h2, h3, p, input {
    font-weight: inherit;
    font-size: inherit;
    list-style: none;
    border-spacing: 0;
    border: 0;
    border-collapse: collapse;
    text-decoration: none;
    padding: 0;
    margin: 0;
  }
  html, body {
    font-family: "Segoe UI", Segoe, Tahoma, Arial, Verdana, sans-serif;
    background-color: #3D69A4;
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
  }
  .welcome-message {
    font-size: 24px;
    color: #FFD700; /* 金色 */
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }

    /* 类选择器.container */
    .container {
      /* 设置div的宽度 */
      width: 800px;
      /* 通过设置外边距达到居中对齐的目的 */
      margin: 0px auto;
      /* 设置外边距的上边距，保持元素和网页的上部距离 */
      margin-top: 80px;
    }

    .container .boost {
      width: 100%;
      height: 52px;
      /* 设置文字居中 */
      text-align: center;
      /* 设置行高，使文字垂直居中 */
      line-height: 52px;
    }

    .container .boost p {
      margin-top: 5px;
      font-size: 20px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      color: green;
    }

    /* 复合选择器，选中container 下的 search */
    .container .search {
      /* 宽度与父标签保持一致 */
      width: 100%;
      /* 高度设置为52px */
      height: 52px;
    }

    /* 先选中input标签， 直接设置标签的属性，先要选中， input：标签选择器*/
    /* input在进行高度设置的时候，没有考虑边框的问题 */
    .container .search input {
      /* 设置left浮动 */
      float: left;
      width: 600px;
      height: 50px;
      /* 设置边框属性：边框的宽度，样式，颜色 */
      border: 1px solid black;
      /* 去掉input输入框的有边框 */
      border-right: none;
      /* 设置内边距，默认文字不要和左侧边框紧挨着 */
      padding-left: 10px;
      /* 设置input内部的字体的颜色和样式 */
      color: #CCC;
      font-size: 14px;
    }

    /* 先选中button标签， 直接设置标签的属性，先要选中， button：标签选择器*/
    .container .search button {
      /* 设置left浮动 */
      float: left;
      width: 150px;
      height: 52px;
      /* 设置button的背景颜色，#4e6ef2 */
      background-color: #4e6ef2;
      /* 设置button中的字体颜色 */
      color: #FFF;
      /* 设置字体的大小 */
      font-size: 19px;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .container .result {
      width: 100%;
    }

    .container .result .item {
      margin-top: 15px;
    }

    .container .result .item a {
      /* 设置为块级元素，单独站一行 */
      display: block;
      /* a标签的下划线去掉 */
      text-decoration: none;
      /* 设置a标签中的文字的字体大小 */
      font-size: 20px;
      /* 设置字体的颜色 */
      color: orange;
    }

    .container .result .item a:hover {
      text-decoration: underline;
    }

    .container .result .item p {
      margin-top: 5px;
      font-size: 16px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    .container .result .item i {
      /* 设置为块级元素，单独站一行 */
      display: block;
      /* 取消斜体风格 */
      font-style: normal;
      color: orange;
    }
  </style>
</head>

<body>

  <body>
    <div class="container">
      <p class="welcome-message">Welcome Come To Boost_Search</p>
      <div class="search">
        <input type="text" value="请输入搜索关键字">
        <button onclick="Search()">搜索一下</button>
      </div>
      <div class="result">
      </div>
    </div>
    <script>
      function Search() {
        // 是浏览器的一个弹出框
        // alert("hello js!");
        // 1. 提取数据, $可以理解成就是JQuery的别称
        let query = $(".container .search input").val();
        console.log("query = " + query); //console是浏览器的对话框，可以用来进行查看js数据

        //2. 发起http请求,ajax: 属于一个和后端进行数据交互的函数，JQuery中的
        $.ajax({
          type: "GET",
          url: "/s?word=" + query,
          success: function (data) {
            console.log(data);
            BuildHtml(data);
          }
        });
      }

      function BuildHtml(data) {
        // 获取html中的result标签
        let result_lable = $(".container .result");
        // 清空历史搜索结果
        result_lable.empty();

        for (let elem of data) {
          // console.log(elem.title);
          // console.log(elem.url);
          let a_lable = $("<a>", {
            text: elem.title,
            href: elem.url,
            // 跳转到新的页面
            target: "_blank"
          });
          let p_lable = $("<p>", {
            text: elem.desc
          });
          let i_lable = $("<i>", {
            text: elem.url
          });
          let div_lable = $("<div>", {
            class: "item"
          });
          a_lable.appendTo(div_lable);
          p_lable.appendTo(div_lable);
          i_lable.appendTo(div_lable);
          div_lable.appendTo(result_lable);
        }
      }
    </script>



    <div class="snow">
      <div class="snow_slice snow_1">
        <div class="snow_drifter drift_1"></div>
      </div>
      <div class="snow_slice snow_2">
        <div class="snow_drifter drift_2"></div>
      </div>
      <div class="snow_slice snow_3">
        <div class="snow_drifter drift_3"></div>
      </div>
      <div class="snow_slice snow_4">
        <div class="snow_drifter drift_4"></div>
      </div>
    </div>
    <div class="frost">
      <div class="frame_sprite frame_left"></div>
      <div class="frame_sprite frame_right"></div>
      <div class="frame_sprite frame_top"></div>
      <div class="frame_sprite frame_bottom"></div>
    </div>
  </body>

</html>